import {messages} from "share/common";
import React, {Component} from 'react';
import {Tabs} from "antd";
import TaxCode from "./tax-code";
import BlackWhiteList from "./black-white-list";

const TabPane = Tabs.TabPane;

class InvoiceAndReceipt extends Component {

  state = {
    tabKey: 'invoice-receipt-mapping',
  };

  renderTabs = () => {
    let tabs = [{
      key: 'invoice-receipt-mapping',
      name: messages('expense-14.key546')/*费用发票映射规则*/,
    }, {
      key: 'invoice-black-white-list',
      name: messages('expense-14.key547')/*发票黑白名单管理*/,
    }];
    return (
      tabs.map(tab => <TabPane tab={tab.name} key={tab.key}/>)
    );
  };

  renderContent = () => {
    const { tabKey } = this.state;
    if (tabKey === 'invoice-receipt-mapping') {
      return <TaxCode />
    } else {
      return <BlackWhiteList />
    }
  };

  render() {
    const { tabKey } = this.state;
    return (
      <div className="full-height-page" style={{ marginTop: -16, height: 'calc(100vh - 50px)' }}>
        <Tabs activeKey={tabKey} onChange={tabKey => this.setState({ tabKey })}>
          {this.renderTabs()}
        </Tabs>
        {this.renderContent()}
      </div>
    );
  }
}

export default InvoiceAndReceipt;
